<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户信息</title>
  <style>
    .back-btn {
      margin-top: 30px;
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s;
      text-align: center;
    }

    .back-btn:hover {
      background-color: #2980b9;
    }
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
      color: #333;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      margin-bottom: 30px;
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
    }

    .nav {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .nav button {
      margin: 0 10px;
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .nav button.active {
      background-color: #2980b9;
    }

    #content {
      min-height: 200px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    .back-btn {
      display: inline-block;
      margin-top: 30px;
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s;
      text-align: center;
    }

    .back-btn:hover {
      background-color: #2980b9;
    }

    #rechargeModal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
    }

    #rechargeForm {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>

    $(document).ready(function () {
      // 初始加载用户中心信息
      loadUserInfo();

      // 点击用户中心按钮
      $('#userInfoBtn').click(function () {
        $(this).addClass('active');
        $('#orderInfoBtn').removeClass('active');
        loadUserInfo();
      });

      // 点击订单信息按钮
      $('#orderInfoBtn').click(function () {
        $(this).addClass('active');
        $('#userInfoBtn').removeClass('active');
        loadOrderInfo();
      });

      // 加载用户中心信息
      function loadUserInfo() {
        $.ajax({
          url: '/user/info',
          type: 'GET',
          data: { username: '[[${user.uname}]]' },
          dataType: 'json',
          success: function (response) {
            if (response.success) {
              var user = response.user;
              var html = '<table>' +
                      '<tr><th>用户名</th><td>' + user.uname + '</td>' +
                      '<td><button id="editUsernameBtn" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">修改</button></td></tr>' +
                      '<tr id="editUsernameRow" style="display:none;"><td></td><td><input type="text" id="newUsername" placeholder="请输入新的用户名" class="border border-gray-400 p-1 rounded mr-2"><button id="saveUsernameBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded">保存</button><button id="cancelUsernameBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2">取消</button></td></tr>' +
                      '<tr><th>密码</th><td id="passwordDisplay">' + user.password + '</td><td><button id="editPasswordBtn" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">修改</button></td></tr>' +
                      '<tr id="editPasswordRow" style="display:none;"><td></td><td><input type="password" id="newPassword" placeholder="请输入新的密码" class="border border-gray-400 p-1 rounded mr-2"><button id="savePasswordBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded">保存</button><button id="cancelPasswordBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2">取消</button></td></tr>' +
                      '<tr><th>手机号</th><td>' + user.phone + '</td></tr>' +
                      '<tr><th>邮箱</th><td id="emailDisplay">' + user.email + '</td><td><button id="editEmailBtn" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">修改</button></td></tr>' +
                      '<tr id="editEmailRow" style="display:none;"><td></td><td><input type="email" id="newEmail" placeholder="请输入新的邮箱" class="border border-gray-400 p-1 rounded mr-2"><button id="saveEmailBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded">保存</button><button id="cancelEmailBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2">取消</button></td></tr>' +
                      '<tr><th>地址</th><td id="addressDisplay">' + user.address + '</td><td><button id="editAddressBtn" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">修改</button></td></tr>' +
                      '<tr id="editAddressRow" style="display:none;"><td></td><td><input type="text" id="newAddress" placeholder="请输入新的地址" class="border border-gray-400 p-1 rounded mr-2"><button id="saveAddressBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded">保存</button><button id="cancelAddressBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2">取消</button></td></tr>' +
                      '<tr><th>注册时间</th><td>' + user.rtime + '</td></tr>' +
                      '<tr><th>余额</th><td>' + user.balance + '</td><td><button id="rechargeBtn" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">充值</button></td></tr>' +
                      '</table>';
              $('#content').html(html);

              // 绑定修改用户名按钮点击事件
              $('#editUsernameBtn').click(function () {
                $('#editUsernameRow').show();
              });

              // 绑定保存用户名按钮点击事件
              $('#saveUsernameBtn').click(function () {
                var newUsername = $('#newUsername').val();
                if (newUsername) {
                  $.ajax({
                    url: '/user/updateUsername',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                      username: '[[${user.uname}]]',
                      newUsername: newUsername
                    }),
                    dataType: 'json',
                    success: function (response) {
                      if (response.success) {
                        alert(response.message);
                        // 修改成功后跳转到 userPage
                        window.location.href = '/userPage?username=' + newUsername;
                      } else {
                        alert(response.message);
                      }
                    },
                    error: function () {
                      alert('请求出错，请稍后重试');
                    }
                  });
                } else {
                  alert('请输入新的用户名');
                }
              });

              // 绑定取消用户名修改按钮点击事件
              $('#cancelUsernameBtn').click(function () {
                $('#editUsernameRow').hide();
              });

              // 绑定充值按钮点击事件
              $('#rechargeBtn').click(function () {
                $('#rechargeModal').show();
              });

              // 绑定充值确认按钮点击事件
              $('#confirmRechargeBtn').click(function () {
                var rechargeAmount = $('#rechargeAmount').val();
                if (rechargeAmount && !isNaN(rechargeAmount) && rechargeAmount > 0) {
                  $.ajax({
                    url: '/user/recharge',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                      username: '[[${user.uname}]]',
                      amount: rechargeAmount
                    }),
                    dataType: 'json',
                    success: function (response) {
                      if (response.success) {
                        alert(response.message);
                        // 充值成功后跳转到用户界面
                        window.location.href = '/userPage?username=' + '[[${user.uname}]]';
                      } else {
                        alert(response.message);
                      }
                    },
                    error: function () {
                      alert('请求出错，请稍后重试');
                    }
                  });
                } else {
                  alert('请输入有效的充值金额');
                }
              });


              // 绑定充值取消按钮点击事件
              $('#cancelRechargeBtn').click(function () {
                $('#rechargeModal').hide();
              });

              // 绑定修改邮箱按钮点击事件
              $('#editEmailBtn').click(function () {
                $('#editEmailRow').show();
              });
              // 绑定修改密码按钮点击事件
              $('#editPasswordBtn').click(function () {
                $('#editPasswordRow').show();
              });

              // 绑定修改地址按钮点击事件
              $('#editAddressBtn').click(function () {
                $('#editAddressRow').show();
              });

              // 绑定保存邮箱按钮点击事件
              $('#saveEmailBtn').click(function () {
                var newEmail = $('#newEmail').val();
                if (newEmail) {
                  $.ajax({
                    url: '/user/updateEmail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                      username: '[[${user.uname}]]',
                      newEmail: newEmail
                    }),
                    dataType: 'json',
                    success: function (response) {
                      if (response.success) {
                        alert(response.message);
                        loadUserInfo();
                      } else {
                        alert(response.message);
                      }
                    },
                    error: function () {
                      alert('请求出错，请稍后重试');
                    }
                  });
                } else {
                  alert('请输入新的邮箱');
                }
              });
              // 绑定保存密码按钮点击事件
              $('#savePasswordBtn').click(function () {
                var newPassword = $('#newPassword').val();
                if (newPassword) {
                  $.ajax({
                    url: '/user/updatePassword',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                      username: '[[${user.uname}]]',
                      newPassword: newPassword
                    }),
                    dataType: 'json',
                    success: function (response) {
                      if (response.success) {
                        alert(response.message);
                        loadUserInfo();
                      } else {
                        alert(response.message);
                      }
                    },
                    error: function () {
                      alert('请求出错，请稍后重试');
                    }
                  });
                } else {
                  alert('请输入新的密码');
                }
              });

              // 绑定取消邮箱修改按钮点击事件
              $('#cancelEmailBtn').click(function () {
                $('#editEmailRow').hide();
              });
              // 绑定取消密码修改按钮点击事件
              $('#cancelPasswordBtn').click(function () {
                $('#editPasswordRow').hide();
              });

              // 绑定保存地址按钮点击事件
              $('#saveAddressBtn').click(function () {
                var newAddress = $('#newAddress').val();
                if (newAddress) {
                  $.ajax({
                    url: '/user/updateAddress',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                      username: '[[${user.uname}]]',
                      newAddress: newAddress
                    }),
                    dataType: 'json',
                    success: function (response) {
                      if (response.success) {
                        alert(response.message);
                        loadUserInfo();
                      } else {
                        alert(response.message);
                      }
                    },
                    error: function () {
                      alert('请求出错，请稍后重试');
                    }
                  });
                } else {
                  alert('请输入新的地址');
                }
              });

              // 绑定取消地址修改按钮点击事件
              $('#cancelAddressBtn').click(function () {
                $('#editAddressRow').hide();
              });
              $('#cancelPasswordBtn').click(function () {
                $('#editPasswordRow').hide();
              });
            } else {
              $('#content').html('<p>' + response.error + '</p>');
            }
          },
          error: function () {
            $('#content').html('<p>请求出错，请稍后重试</p>');
          }
        });
      }

      // 加载订单信息
      function loadOrderInfo() {
        $.ajax({
          url: '/user/orders',
          type: 'GET',
          data: { username: '[[${user.uname}]]' },
          dataType: 'json',
          success: function (response) {
            if (response.success) {
              var tickets = response.tickets;
              var html = '<table>' +
                      '<tr><th>电影名称</th><th>单价</th><th>数量</th><th>总价</th><th>下单时间</th></tr>';
              for (var i = 0; i < tickets.length; i++) {
                var ticket = tickets[i];
                html += '<tr>' +
                        '<td>' + ticket.mname + '</td>' +
                        '<td>' + ticket.price + '</td>' +
                        '<td>' + ticket.count + '</td>' +
                        '<td>' + ticket.totalprice + '</td>' +
                        '<td>' + ticket.otime + '</td>' +
                        '</tr>';
              }
              html += '</table>';
              $('#content').html(html);
            } else {
              $('#content').html('<p>' + response.error + '</p>');
            }
          },
          error: function () {
            $('#content').html('<p>请求出错，请稍后重试</p>');
          }
        });
      }
    });
  </script>
</head>
<body>
<div class="container">
  <h1>用户信息</h1>
  <div class="nav">
    <button id="userInfoBtn" class="active">用户中心</button>
    <button id="orderInfoBtn">我的订单</button>
  </div>
  <div id="content"></div>
  <a th:href="@{/successPage(username=${user.uname})}" class="back-btn">返回电影列表</a>
</div>
<!-- 充值模态框 -->
<div id="rechargeModal">
  <div id="rechargeForm">
    <h2>充值</h2>
    <label for="rechargeAmount">充值金额：</label>
    <input type="number" id="rechargeAmount" placeholder="请输入充值金额">
    <button id="confirmRechargeBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded">确认</button>
    <button id="cancelRechargeBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2">取消</button>
  </div>
</div>
</body>
</html>